import styles from './MarkPad.less';
import { DeleteOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';

type Props = {
    index: number,
    current: number[],
    callback: (index: number, num: number[]) => void;
};

export default ({ index, current, callback }: Props) => {

    const [mark, setMark] = useState<number[]>(current);

    useEffect(() => {
        !!useEffect && setMark(current);
    }, [current]);

    const onNumClick = (num: number) => {
        if (mark?.includes(num)) {
            callback?.(index, mark.filter(i => i != num));
        } else {
            callback?.(index, [...(mark || []), num]);
        }
    }

    return (
        <div className={styles.numPad}>
            <div className={styles.top}>
                <span>标记</span>
                <div onClick={() => callback?.(index, [])}><DeleteOutlined style={{ color: '#d46060' }} /></div>
            </div>
            {NUMS.map(i => (
                <span className={mark?.includes(i) ? styles.itemActive : styles.item} key={`${i}`} onClick={() => onNumClick(i)}>{i}</span>
            ))}
        </div>
    );
}

const NUMS = [1, 2, 3, 4, 5, 6, 7, 8, 9];